<template>
  <div class="form-wrapper" v-loading="loading">
    <el-table
      class="table border-table"
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      :max-height="300"
      ref="multipleTable"
    >
      <el-table-column width="48px" align="center">
        <template slot-scope="scope">
          <el-radio v-model="radioId" :label="scope.row.id"
            ><span></span
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="序号" show-overflow-tooltip width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span>
        </template>
      </el-table-column>
      <el-table-column
        label="数据集名称"
        prop="fileName"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="数据集描述"
        prop="fileDesc"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="类型" prop="fileType" show-overflow-tooltip>
        <template slot-scope="scope">
          {{
            $common.fetchSingleWord({
              val: scope.row.fileType,
              dict: classifyList,
              flag: "--",
            })
          }}
        </template>
      </el-table-column>
      <el-table-column label="文件大小" prop="fileSize" show-overflow-tooltip>
        <template slot-scope="scope"
          >{{ $common.formatFileSize(scope.row.fileSize, 0) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="taskType" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ $common.format(scope.row.createTime, "yyyy-MM-dd", "--") }}
        </template>
      </el-table-column>
    </el-table>
    <mine-pagination
      @numberChange="numberChange"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
    >
    </mine-pagination>
  </div>
</template>
<script>
import { mappingMixins } from "../mixins";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";

export default {
  mixins: [mappingMixins],
  props: {
    projectType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      listQuery: {
        fileTypes: "",
      },
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      radioId: "",
      dataSetId: "",
    };
  },
  methods: {
    submit() {
      if (!this.radioId) {
        this.$message({ type: "warning", message: "请选择数据集" });
        return;
      }
      return this.tableData.find((item) => item.id === this.radioId);
    },
    async loadData(flag) {
      if (flag) {
        this.currentPage = 1;
      }
      this.radioId = "";
      const params = {
        ...this.listQuery,
        fileTypes: this.projectType,
        pageSize: this.pageSize,
        page: this.currentPage,
      };
      this.loading = true;
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          _self.dataSetId = uuid;
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: `/material-info/search`,
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: params,
                isStringParam: false,
                requestId: _self.dataSetId,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              _self.$emit("getModelTableData");
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data || {};
                _self.tableData =
                  data.list && data.list.length ? data.list : [];
                _self.total = data.rowCount || 0;
              } else {
                _self.tableData = [];
                _self.total = 0;
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          this.dataSetId = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/material-info/search`,
            "post",
            "application/json;charset=UTF-8",
            params,
            false,
            this.dataSetId
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              let res = e.data.response;
              // TODO： 定制后台数据处理
              this.$emit("getModelTableData");
              if (res.status === 200) {
                const data = res.data || {};
                this.tableData = data.list && data.list.length ? data.list : [];
                this.total = data.rowCount || 0;
              } else {
                this.tableData = [];
                this.total = 0;
              }
            },
            { once: true }
          );
        } else {
          const res = await this.$store.dispatch(
            "modelManageMaterialInfoSearch",
            params
          );
          const result = res.data || {};
          this.$emit("getModelTableData");
          if (result.success) {
            const data = result.data || {};
            this.tableData = data.list && data.list.length ? data.list : [];
            this.total = data.rowCount || 0;
          } else {
            this.tableData = [];
            this.total = 0;
          }
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    numberChange(val) {
      switch (val.flag) {
        case "pageSize":
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case "currentPage":
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
  watch: {
    projectType: {
      handler: function (newVal, oldVal) {
        this.loadData();
      },
    },
  },
  created() {
    this.loadData();
  },
};
</script>
<style lang="less" scoped></style>
